<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-23 17:44:42
 * @LastEditors: kk
 * @LastEditTime: 2020-10-23 22:30:23
-->
<!--  -->
<template>
  <div >
    <el-form
      ref="form"
      :model="itemInfo"
      label-width="80px"
      class="Center"
    >
      <el-form-item label="商品名称">
        <el-input v-model="itemInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="商品码">
        <el-input v-model="itemInfo.code"></el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="itemInfo.stock"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >添加或更新</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import item from "@/api/item";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      itemId: "",
      itemInfo: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSubmit() {
      //判断是添加还是更新
      if (!this.itemId) {
        this.addItem();
      } else {
        this.updateItem();
      }
    },
    //添加商品
    addItem() {
      console.log("submit!");
      item.addItem(this.itemInfo).then((response) => {
          if(response.code==200){
            this.$message({
            message: "添加成功",
            type: "success",
          });
          this.$router.push("/item/list");
          }else{
              this.$message({
              message: response.message,
              type: "error",
              });
          }
      });
      //this.$router.push("/item/list");
    },
    getItem(id) {
      item.getItem(id).then((response) => {
          console.log(response.data)
        this.itemInfo = response.data.item;
      });
    },
    updateItem() {
      item.updateItem(this.itemInfo).then((response) => {
          if(response.code==200){
            this.$message({
            message: "更新成功",
            type: "success",
            });
          this.$router.push("/item/list");
          }else{
              this.$message({
              message: response.message,
              type: "error",
              });
          }
      
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log(this.$route.params.id);
    //获取路由id值
    if (this.$route.params && this.$route.params.id) {
      // //判断是添加还是编辑
      this.itemId = this.$route.params.id;
      // //调用根据id查询课程的方法
      this.getItem(this.itemId);
    } else {
      console.log("啥都不做");
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Center{
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    width: 50%;
}
</style>